<template>
	<view>
		<!-- 导航栏 -->
		<u-subsection :list="list" :current="curNow" @change="sectionChange" mode="subsection"
			activeColor='#c00000'></u-subsection>
		<!-- 收藏列表 -->
		<view class="batch" v-if="collect.length > 0 && curNow == 0">
			<view class="icontext">
				<uni-icons class="uni-icons" color="#c00000" type="shop" size="18"></uni-icons>
				<text class="text">优购</text>
			</view>
			<view class="batchDelted" @click="batchDelete">
				<u-icon name="trash" color="#c00000" size="18"></u-icon>
				<u-button class="u-button" type="error" text="批量删除" size="16"></u-button>
			</view>
		</view>
		<u-line class="u-line" :dashed="false" color="#d6d7d9"></u-line>
		<myCart class="myCart" v-if="collect.length > 0 && curNow == 0" :action="action" :cartList="collectList"
			@deleted="deleted" :number_box="false" @checkedBox="checkedBox"></myCart>
		<myCart class="myCart" v-else-if="deletedCollectId.length > 0 && curNow == 1" :action="action" :showCheckbox="false"
			:cartList="collectList" :number_box="false"></myCart>

		<!-- 内容为空 -->
		<view class="" v-else>
			<myEmpty mode="data" @clickBnt="clickBnt" :IfShowBut='false' :windowHeight="100"></myEmpty>
		</view>
		<!-- 提示框 -->
		<view class="" v-show="showModal">
			<myModal @cancel="cancel" @confirm="confirm" contents="确定要删除此收藏吗?"></myModal>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				list: ['已收藏', '已删除收藏'],
				curNow: 0,
				collectList: [], //收藏商品
				action: false, //是否可以平滑
				deletedId: void 0, //删除商品id
				showModal: false, //提示框
			};
		},
		mounted() {
			uni.$setNavigationBarColor()
			this.init()
		},
		computed: {
			...mapState("collect", ["collect", "deletedCollectId"])
		},
		methods: {
			...mapMutations("collect", ["deleteCollect"]),
			//循环调用收藏
			init() {
				this.collectList = []
				this.action = false //可以平滑删除收藏
				let collectId = this.collect
				collectId.forEach(itemId => {
					this.getCollect(itemId)
				})
			},
			//选择导航栏
			sectionChange(index) {
				if (index == 1) {
					this.collectList = []
					this.action = true //禁止平滑删除
					let collectedId = this.deletedCollectId
					collectedId.forEach(itemId => {
						this.getCollect(itemId)
					})
				} else {
					this.init()
				}
				this.curNow = index;
			},
			//选择是否删除收藏
			checkedBox(val) {
				this.collectList.filter(item => item.goods_id == val.goods_id).forEach(item => item.goods_state = !val
					.goods_state)
			},
			//获取收藏
			async getCollect(goods_id) {
				const {
					data: res
				} = await uni.$http.get('/api/public/v1/goods/detail', {
					goods_id
				})
				this.collectList.push(res.message)
				this.collectList.forEach(item => {
					item.goods_state = true
				})
			},
			//批量删除收藏
			batchDelete() {
				this.deletedId = this.collectList.filter(item => Boolean(item.goods_state)).map(item => item.goods_id)
				if (this.deletedId.length == 0) {
					return uni.$showToast("请选择删除的收藏", "error")
				}
				this.showModal = true
			},
			//打开提示框
			deleted(e) {
				this.deletedId = e.name
				this.showModal = true
			},
			//关闭提示框
			cancel() {
				this.showModal = false
			},
			//删除商品
			confirm() {

				this.deleteCollect(this.deletedId)
				this.init()
				this.cancel()
			}
		},

		onPageScroll(e) {
			//解决平滑是滚动报错
			this.action = true //添加的class类名
			clearTimeout(this.timer) //这里必须要每次滚动前 清除一次
			// 如果停留则表示滚动结束  一旦空了1s就判定为滚动结束
			this.timer = setTimeout(() => {
				this.action = false //滚动结束清除class类名
			}, 500)
		}
	}
</script>

<style lang="scss">
	.myCart {
		margin-top: 10rpx;
	}

	.batch {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 10px 0;

		.icontext {
			display: flex;
			align-items: center;

			.uni-icons {
				padding-left: 10rpx;
			}

			.text {
				font-size: 22rpx;
			}
		}


		.batchDelted {
			display: flex;
			padding-right: 10rpx;
			align-items: center;

			.u-button {
				margin-left: 10rpx;
				width: 100%;
				height: 30px;
				color: #fff;
				background-color: #c00000;

			}
		}
	}
</style>